<template>
  <div>
    <content-wrapper
      :tableList="tableList"
      :searchList="searchList"
      :setting="setting"
      @changeOpt="changeOpt"
      @changeTable="changeTable"
      @formValue="formValue"
    >
      <div slot="searchLeft">
        <a-button type="primary" style="margin-right: 20px" @click="exportFile">
          <a-icon type="cloud-download" />
          导出
        </a-button>
      </div>
      <a-modal :title="Joingroup" v-model="visible" :footer="null">
        <a-list itemLayout="horizontal" :dataSource="groupInformation">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta :description="'共' + item.num + '成员'">
              <a slot="title">{{ item.name }}</a>
              <a-avatar slot="avatar" :src="$api.picPre + item.cover" />
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-modal>
    </content-wrapper>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {
    contentWrapper: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      tableList: {
        columns: [
          {
            title: "ID",
            dataIndex: "id"
          },
          {
            title: "头像",
            dataIndex: "head_img",
            align: "center",
            scopedSlots: { customRender: "avatar" }
          },
          {
            title: "昵称",
            dataIndex: "username"
          },
          {
            title: "手机号",
            dataIndex: "mobile"
          },
          {
            title: "性别",
            dataIndex: "sex"
          },
          {
            title: "城市",
            dataIndex: "city"
          },
          {
            title: "经验值",
            dataIndex: "experience"
          },
          {
            title: "积分",
            dataIndex: "integral"
          },
          {
            title: "加入的群组",
            dataIndex: "group",
            align: "center",
            type: "btn",
            list: [
              {
                ath: "groupMemberDetail",
                label: "查看",
                extraValue: "lookOver",
                className: "text-danger"
              }
            ],
            scopedSlots: { customRender: "group" }
          },
          {
            title: "发布的帖子",
            dataIndex: "post",
            align: "center",
            type: "btn",
            list: [
              {
                ath: "associationPosted",
                label: "查看",
                extraValue: "associationPosted",
                className: "text-danger"
              }
            ],
            scopedSlots: { customRender: "post" }
          },
          {
            title: "发表的评论",
            dataIndex: "comment",
            align: "center",
            type: "btn",
            list: [
              {
                ath: "associationComment",
                label: "查看",
                extraValue: "associationComment",
                className: "text-danger"
              }
            ],
            scopedSlots: { customRender: "comment" }
          },
          {
            title: "注册时间",
            dataIndex: "created_at"
          },
          {
            title: "前端管理员",
            dataIndex: "is_auth",
            align: "center",
            type: "deactivate",
            activeIndex: "2",
            scopedSlots: { customRender: "is_auth" }
          },
          {
            title: "操作",
            dataIndex: "opt",
            align: "center",
            type: "btn",
            list: [
              {
                key: "is_auth",
                value: "1",
                ath: "setPostsAuth",
                label: "设为前端管理员",
                extraValue: "set",
                className: "text-green"
              },
              {
                key: "is_auth",
                value: "2",
                ath: "setPostsAuth",
                label: "取消前端管理员",
                extraValue: "cancel",
                className: "text-danger"
              }
            ],
            scopedSlots: { customRender: "opt" }
          }
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0
        },
        sorter: {}
      },
      searchList: [
        {
          type: "input",
          label: "手机号",
          placeholder: "手机号",
          name: "mobile"
        },
        {
          type: "input",
          label: "群组",
          placeholder: "群组",
          name: "group_id"
        }
      ],
      searchInfo: {
        mobile: "",
        group_id: ""
      },
      setting: {},
      visible: false,
      Joingroup: "",
      groupInformation: []
    };
  },
  methods: {
    changeOpt(item, type) {
      switch (type) {
        case "lookOver":
          this.examine(item);
          break;
        case "set":
          this.setupAdministrator(item.id, 1);
          break;
        case "cancel":
          this.setupAdministrator(item.id, 2);
          break;
        case "associationPosted":
          this.$commonJs.goPage(type, false, item.username, "member");
          break;
        case "associationComment":
          this.$commonJs.goPage(type, false, item.username, "member");
          break;
      }
    },
    setupAdministrator(id, type) {
      this.$ajax
        .post(this.$api.setPostsAuth, { id: id, type: type })
        .then(() => {
          this.$notification.success({
            message: "操作成功！"
          });
          this.getInfo();
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    examine(data) {
      this.$ajax
        .post(this.$api.groupMemberDetail, { member_id: data.id })
        .then(res => {
          this.groupInformation = res;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
      this.visible = true;
      this.Joingroup = data.username + "加入的群组";
      this.groupInformation = data.group;
    },
    changeTable(pagination) {
      Object.assign(this.tableList.pagination, pagination);
      this.getInfo();
    },
    formValue(values) {
      this.tableList.pagination.current = 1;
      Object.assign(this.searchInfo, values);
      this.getInfo();
    },
    exportFile() {
      let url = this.$api.downloadMemberList;
      if (this.searchInfo.mobile) {
        url += "&mobile=" + this.searchInfo.mobile;
      } else {
        url += "&mobile=";
      }
      if (this.searchInfo.group_id) {
        url += "&group_id=" + this.searchInfo.group_id;
      } else {
        url += "&group_id=";
      }
      url +=
        "&excel_download=1&token=" +
        this.$crypto.getAES(localStorage.getItem("token"));
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    getInfo() {
      this.$ajax
        .get(this.$api.memberList, {
          mobile: this.searchInfo.mobile,
          group_id: this.searchInfo.group_id,
          page_size: this.tableList.pagination.pageSize,
          page: this.tableList.pagination.current
        })
        .then(res => {
          for (let item of res.data) {
            if (item.sex === "1") {
              item.sex = "男";
            } else if (item.sex === "2") {
              item.sex = "女";
            }
          }
          this.tableList.dataSource = res.data;
          this.tableList.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    if (this.$route.query.group) {
      this.searchInfo.group_id = this.$route.query.group;
    }
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
